<template>
    <van-pull-refresh v-model="freshing" @refresh="onRefresh" success-text="刷新成功">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <li v-for="item in list" :key="item.id" @click="toDetail(item.id)">
                    <div class="itemimg">
                        <!-- <img :src="item.image" alt=""> -->
                        <img v-lazy="item.image">
                    </div>
                    <div class="iteminfo">
                        <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
                        <p class="price">￥{{ item.price }}.00</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>

<script>
// import axios from 'axios'
import request from '@/utils/request.js'
export default {
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            pagination: 1,
            freshing: false,
        }
    },
    // 生命周期
    // created() {
    //     // 调接口，拿到list数据
    //     request.get('/list', {
    //         params: {
    //             pagination: 1,
    //             pageNum: 10
    //         }
    //     }).then(res => {
    //         console.log(res, 'res')
    //         if (res.data.code == 200) {
    //             this.list = res.data.data
    //         }
    //     })
    // },
    methods: {
        onLoad() {
            // 思路： 滚动条滚动到距离底部300时触发
            // 调接口获取数据 传参： 第几页  多少条
            // 第一次：第一页   之后每次pagination++
            // 每次拿到的十条数据，数组拼接(concat  ...)
            //  加载完成后 ， finished设置为true
            this.loading = true
            request.get('/list', {
                params: {
                    pagination: this.pagination,
                    pageNum: 10
                }
            }).then(res => {
                console.log(res, 'res')
                if (res.data.code == 200) {
                    // this.list = res.data.data
                    // this.list = this.list.concat(res.data.data)
                    this.list = [...this.list, ...res.data.data]
                }
                this.loading = false
                this.pagination += 1
                // 加载完成后 ， finished设置为true
                if (this.list.length >= res.data.total) {
                    this.finished = true
                }
            })
        },
        onRefresh() {
            this.freshing = true
            setTimeout(() => {
                this.freshing = false
            }, 1000)
        },
        toDetail(id) {
            // 跳转到详情页 --- 编程式导航
            // this.$router.push(`/detail/${id}`)
            this.$router.push('/detail/' + id)
        }
    }
}
</script>

<style lang="scss" scoped>
ul {
    // 解决高度塌陷
    overflow: hidden;

    li {
        width: 49%;
        height: 230px;
        float: left;
        margin: 0.5%;

        .itemimg {
            height: 166px;
            overflow: hidden;

            img {
                width: 100%;
            }
        }

        .iteminfo {
            padding: 2px 8px;

            .price {
                color: red;
                font-size: 20px;
            }
        }
    }
}
</style>
